<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/common/common-css.jsp" %>
    <style>
        #jquery-table td {
            cursor: pointer !important
        }

        .load_bg {
            background: #000;
            opacity: 0.1;
            left: 0px;
            top: 0px;
            position: fixed;
            height: 100%;
            width: 100%;
            overflow: hidden;
            z-index: 10000;
        }

        .load_img {
            left: 50%;
            top: 180px;
            position: fixed;
            height: 50px;
            overflow: hidden;
            z-index: 20000;
        }
    </style>
</head>
<body class="no-skin">
<div class="load_bg" style="display:none"></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>
<div class="page-content">
    <form id="queryForm">
        <div class="page-content-area">
            <div class="row">
                <div class="col-sm-12">
                    <div class="widget-box"
                         style="border:0px solid #ccc; border-top:none;border-bottom:none;margin-top:15px;">
                        <hr style="margin-top:0px;margin-bottom:0x">
                        <div class="widget-header widget-header-blue widget-header-flat">
                            <h4 class="widget-title">微信关键字</h4>
                            <div class="widget-toolbar">
                                <a href="#" data-action="collapse">
                                    <i class="ace-icon fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <hr>
                        <div class="widget-body">

                            <div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <label class="col-sm-6 control-label" style="text-align:right"
                                       for="k-account">微信号:</label>
                                <div class="col-sm-6">
                                    <select id="k-account" name="account">
                                        <option value="" selected>全部</option>
                                        <option value="4">测试公众号</option>
                                        <option value="8105">菠萝优选</option>
                                        <option value="8103">有点零花</option>
                                        <option value="8119">菠萝钱柜</option>
                                        <option value="8120">西瓜钱柜</option>
                                        <option value="8121">熊花花</option>
                                        <option value="8118">布拿拿管卡花</option>
                                        <option value="8109">宝贝零花</option>
                                        <option value="8110">小熊零花</option>
                                        <option value="8111">钱哆哆</option>
                                        <option value="8112">任我财</option>
                                        <option value="8113">吾小钱</option>
                                        <option value="8114">喜乐花</option>
                                        <option value="8115">菠萝米花</option>
                                        <option value="8116">每日花</option>
                                        <option value="8117">菠萝花</option>
                                        <option value="8122">欢乐零花</option>
                                        <option value="8123">欢乐钱柜</option>
                                        <option value="8126">菠萝零花</option>
                                        <option value="8130">欢乐有钱</option>
                                        <option value="8131">优选锦鲤</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <label class="col-sm-6 control-label" style="text-align:right"
                                       for="k-status">状态:</label>
                                <div class="col-sm-6">
                                    <select id="k-status" name="status">
                                        <option value="" selected>全部</option>
                                        <option value="0">下线</option>
                                        <option value="1">上线</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <label class="col-sm-6 control-label" style="text-align:right" for="subscribe">是否为关注自动回复:</label>
                                <div class="col-sm-6">
                                    <select id="subscribe" name="subscribe">
                                        <option value="" selected>全部</option>
                                        <option value="1">是</option>
                                        <option value="0">否</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <label class="col-sm-6 control-label" style="text-align:right" for="approximate">是否为模糊关键字:</label>
                                <div class="col-sm-6">
                                    <select id="approximate" name="approximate">
                                        <option value="" selected>全部</option>
                                        <option value="0">精准关键字</option>
                                        <option value="1">模糊关键字</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <label class="col-sm-6 control-label" style="text-align:right" for="is_coupon">是否下发优惠券:</label>
                                <div class="col-sm-6">
                                    <select id="is_coupon" name="is_coupon">
                                        <option value="" selected>全部</option>
                                        <option value="0">不下发优惠券</option>
                                        <option value="1">下发优惠券</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <label class="col-sm-6 control-label" style="text-align:right" for="k-word">关键字:</label>
                                <div class="col-sm-6">
                                    <s:select id="k-word" name="keyword" list="%{keywordList}" cssClass="form-control"
                                              headerKey="" headerValue="全选"/>
                                </div>
                            </div>

                            <div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <label class="col-sm-6 control-label" style="text-align:right"
                                       for="k-type">关键字回复类型:</label>
                                <div class="col-sm-6">
                                    <select id="k-type" name="type">
                                        <option value="" selected>全部</option>
                                        <option value="0">文字</option>
                                        <option value="1">图文</option>
                                        <option value="2">外部接口</option>
                                        <option value="3">图片</option>
                                    </select>
                                </div>
                            </div>

                            <div class="widget-main">
                                <div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3" style="text-align:right">
                                    <button class="btn btn-purple  no-border" type="button" name="btn-query"
                                            onclick="query_any()">
                                        <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
                                        查询
                                    </button>
                                    &nbsp;&nbsp;&nbsp;
                                    <button class="btn btn-grey  no-border" type="reset">
                                        <i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
                                        重置
                                    </button>
                                    &nbsp;&nbsp;&nbsp;
                                    <button type="button" name="btn-add" class="btn btn-green  no-border"
                                            onclick="doAdd();">
                                        <i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
                                        新增
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr style="display:none;" id="delete_hr">
            <div class="row">
                <div class="col-xs-12">
                    <table id="jquery-table" class="table table-striped table-bordered table-hover">
                    </table>
                </div>
            </div>
        </div>
    </form>
</div>

<%@ include file="/common/common-js.jsp" %>
<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
<script type="text/javascript">
    function query_any() {
        $(".load_bg").removeAttr("style");
        $(".load_img").removeAttr("style");
        if (jqTable != null) {
            jqTable.fnDraw();
        }
        else {
            loaddata();
        }
        $("#delete_btn").attr("style", "display:block");
        $("#delete_hr").attr("style", "margin-top:0px;margin-bottom:20px;display:block");
    }
    var jqTable = null;
    var loaddata = function () {
        jQuery(function ($) {
            jqTable = $('#jquery-table').dataTable({
                "columnDefs": [
                    {
                        "title": "操作",
                        "targets": [0],
                        "name": "status",
                        "data": "status",
                        "bSortable": false,
                        "render": function (value, type, row) {
                            var temp;
                            if (value == 0) {
                                temp = "<input class='btn btn-success btn-sm' type='button' value='上线' onclick='updateBanner(" + row.id + ",1)'/><BR/><BR/>" +
                                        "<input class='btn btn-blue btn-sm' type='button' value='编辑' onclick='editBanner(" + row.id + ")'/><BR/><BR/>" +
                                        "<input class='btn btn-yellow btn-sm' type='button' value='删除' onclick='removeBanner(" + row.id + ")'/>";
                                return temp;
                            }
                            else {
                                temp = "<input class='btn btn-success btn-sm' type='button' name='PK' value='下线' onclick='updateBanner(" + row.id + ",0)'/><BR/><BR/>" +
                                        "<input class='btn btn-blue btn-sm' type='button' name='PK' value='编辑' onclick='editBanner(" + row.id + ")'/><BR/><BR/>" +
                                        "<input class='btn btn-yellow btn-sm' type='button' name='PK' value='删除' onclick='removeBanner(" + row.id + ")'/>";
                                return temp;
                            }
                        }
                    },
                    {
                        "title": "关键字",
                        "targets": [1],
                        "data": "keyword",
                        "bSortable": false
                    },
                    {
                        "title": "回复类型",
                        "data": "type",
                        "targets": [2],
                        "bSortable": false,
                        "render": function (v) {
                            switch (v) {
                                case 0:
                                    return '文字';
                                case 1:
                                    return '图文';
                                case 2:
                                    return '外部接口';
                                case 3:
                                    return '图片';
                                default:
                                    return v;
                            }
                        }
                    },
                    {
                        "title": "回复文字",
                        "targets": [3],
                        "data": "replay",
                        "bSortable": false,
                        "render": function (d) {
                            if (d) {
                                d = d.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                            }

                            if (d && d.length > 200) {
                                return '<span title="' + d + '">' + d.slice(0, 200) + '...</span>';
                            }
                            else {
                                return d;
                            }
                        }
                    },
                    {
                        "title": "外部接口",
                        "targets": [4],
                        "data": "api",
                        "bSortable": false,
                        "render": function (d) {
                            if (d) {
                                d = d.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                            }

                            if (d && d.length > 30) {
                                return '<span title="' + d + '">' + d.slice(0, 30) + '...</span>';
                            }
                            else {
                                return d;
                            }
                        }
                    },
                    {
                        "title": "图文标题",
                        "data": "title",
                        "targets": [5],
                        "bSortable": false,
                        "render": function (d) {
                            if (d) {
                                d = d.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                            }

                            if (d && d.length > 100) {
                                return '<span title="' + d + '">' + d.slice(0, 100) + '...</span>';
                            }
                            else {
                                return d;
                            }
                        }
                    },
                    {
                        "title": "图文介绍",
                        "data": "desc",
                        "targets": [6],
                        "bSortable": false,
                        "render": function (d) {
                            if (d) {
                                d = d.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                            }

                            if (d && d.length > 100) {
                                return '<span title="' + d + '">' + d.slice(0, 100) + '...</span>';
                            }
                            else {
                                return d;
                            }
                        }
                    },
                    {
                        "title": "图文图片",
                        "data": "picUrl",
                        "targets": [7],
                        "bSortable": false,
                        "render": function (d) {
                            if (d) {
                                d = d.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                            }

                            if (d) {
                                return '<img style="width: 300px;height: 160px" src="' + d + '" title="' + d + '"/>';
                            }
                            else return d;
                        }
                    },
                    {
                        "title": "图文链接",
                        "data": "url",
                        "targets": [8],
                        "bSortable": false,
                        "render": function (d) {
                            if (d) {
                                d = d.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                            }

                            if (d && d.length > 30) {
                                return '<span title="' + d + '">' + d.slice(0, 30) + '...</span>';
                            }
                            else {
                                return d;
                            }
                        }
                    },
                    {
                        "title": "排序依据",
                        "data": "orderNum",
                        "targets": [9],
                        "bSortable": false
                    },
                    {
                        "title": "微信号",
                        "data": "source",
                        "targets": [10],
                        "bSortable": false,
                        "render": function (v) {
                            switch (v) {
                                case 4:
                                    return '测试公众号';
                                case 8105:
                                    return '菠萝优选';
                                case 8103:
                                    return '有点零花';
                                case 8119:
                                    return '菠萝钱柜';
                                case 8120:
                                    return '西瓜钱柜';
                                case 8121:
                                    return '熊花花';
                                case 8118:
                                    return '布拿拿管卡花';
                                case 8109:
                                    return '宝贝零花';
                                case 8110:
                                    return '小熊零花';
                                case 8111:
                                    return '钱哆哆';
                                case 8112:
                                    return '任我财';
                                case 8113:
                                    return '吾小钱';
                                case 8114:
                                    return '喜乐花';
                                case 8115:
                                    return '菠萝米花';
                                case 8116:
                                    return '每日花';
                                case 8117:
                                    return '菠萝花';
                                case 8122:
                                    return '欢乐零花';
                                case 8122:
                                    return '欢乐钱柜';
                                case 8126:
                                    return '菠萝零花';
                                default:
                                    return v;
                            }
                        }
                    },
                    {
                        "title": "状态",
                        "data": "status",
                        "targets": [11],
                        "bSortable": false,
                        "render": function (v) {
                            switch (v) {
                                case 0:
                                    return '下线';
                                case 1:
                                    return '上线';
                                default:
                                    return v;
                            }
                        }
                    },
                    {
                        "title": "是否下发优惠券",
                        "data": "is_coupon",
                        "targets": [12],
                        "bSortable": false,
                        "render": function (v) {
                            switch (v) {
                                case 0:
                                    return '不下发优惠券';
                                case 1:
                                    return '下发优惠券';
                                default:
                                    return v;
                            }
                        }
                    }
                ],
                "sAjaxSource": ctx + "/weixin/weixin_keyword_list.action?rd=" + Math.random(),
                "fnServerData": function (sSource, aoData, fnCallback) {
                    var data = $('#queryForm').serializeObject();
                    data.aoData = JSON.stringify(aoData);
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": data,
                        "success": function (resp) {
                            fnCallback(resp);
                            initListPage();
                            $(".load_bg").attr("style", "display:none");
                            $(".load_img").attr("style", "display:none");
                        },
                        "error": function (XMLHttpRequest, textStatus, errorThrown) {
                            $(".load_bg").attr("style", "display:none");
                            $(".load_img").attr("style", "display:none");
                            alert('请求服务器错误,请刷新重试！！');
                        }
                    });
                },
                "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                },
                "sScrollXInner": "100%",
                "sScrollY": "100%"
            });
        });
    };

    function doAdd() {
        openDialogWithRand('/weixin/weixin_keyword_edit.action', 1000, 800, "新增微信关键字回复/关注文案", function () {
            jqTable.fnDraw();
        });
    }

    function editBanner(id) {
        openDialogWithRand('/weixin/weixin_keyword_edit.action?action=edit&id=' + id, 1000, 800, "编辑微信关键字回复/关注文案", function () {
            jqTable.fnDraw();
        });
    }

    function removeBanner(id) {
        var answer = window.confirm("是否确定删除该关键字配置?");
        if (answer) {
            $.getJSON(ctx + '/weixin/weixin_keyword_update_status.action', {
                id: id,
                action: 'delete'
            }, function (result) {
                if (result.status == 0) {
                    jqTable.fnDraw();
                }
                else {
                    alert('删除失败');
                }
            }).error(function () {//失败处理
                $(".load_bg").attr("style", "display:none");
                $(".load_img").attr("style", "display:none");
                alert('请求服务器错误,请刷新重试！！');
            });
        }
    }

    function updateBanner(id, status) {
        $.getJSON(ctx + '/weixin/weixin_keyword_update_status.action', {
            id: id,
            newStatus: status,
            action: 'update'
        }, function (result) {
            if (result.status == 0) {
                jqTable.fnDraw();
            }
            else {
                alert('修改失败');
            }
        }).error(function () {//失败处理
            $(".load_bg").attr("style", "display:none");
            $(".load_img").attr("style", "display:none");
            alert('请求服务器错误,请刷新重试！！');
        });
    }

    jQuery(function ($) {
        $("#k-word").combobox();
        query_any();
    });
</script>
</body>
</html>
